<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>食光集 - 发现</title>
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 自定义配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF9AA2', // 可爱粉色
                        secondary: '#FFB7B2', // 浅粉色
                        accent: '#FFDAC1', // 橙色
                        light: '#E2F0CB', // 浅绿色
                        dark: '#B5EAD7', // 深绿色
                    },
                    fontFamily: {
                        sans: ['PingFang SC', 'Helvetica Neue', 'Arial', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style>
        /* 自定义样式 */
        .glass-effect {
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        .nav-tab {
            position: relative;
            transition: all 0.3s ease;
        }
        .nav-tab.active {
            color: #FF9AA2;
        }
        .nav-tab.active::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 3px;
            background-color: #FF9AA2;
            border-radius: 3px;
        }
        .recipe-card {
            transition: transform 0.3s;
        }
        .recipe-card:hover {
            transform: translateY(-5px);
        }
        
        /* 点赞特效 */
        @keyframes likeAnimation {
            0% { transform: scale(1); }
            50% { transform: scale(1.3); }
            100% { transform: scale(1); }
        }
        
        .like-animation {
            animation: likeAnimation 0.5s ease;
        }
        
        /* 点赞按钮样式 */
        .like-button {
            position: relative;
            z-index: 10;
        }
        
        .like-button.liked {
            color: #FF9AA2;
        }
        
        .like-button.liked i {
            color: #FF9AA2;
        }
        
        /* 做菜养成器样式 */
        .cooking-simulator {
            position: relative;
            overflow: hidden;
            border-radius: 1rem;
        }
        
        .cooking-simulator-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
            padding: 1rem;
            color: white;
        }
        
        .cooking-simulator-progress {
            height: 6px;
            border-radius: 3px;
            overflow: hidden;
        }
        
        .cooking-simulator-progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #FF9AA2, #FFB7B2);
            border-radius: 3px;
            transition: width 0.3s ease;
        }
        
        /* 标签样式 */
        .tag {
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .tag.active {
            background-color: #FF9AA2;
            color: white;
        }
        
        /* 分类图标样式 */
        .category-icon {
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .category-icon.active {
            background-color: #FF9AA2;
            color: white;
        }
        
        .category-icon.active span {
            color: white;
        }
        
        /* 菜谱卡片动画 */
        .recipe-card {
            transition: all 0.3s ease;
            opacity: 1;
        }
        
        .recipe-card.hidden {
            display: none;
            opacity: 0;
        }
        
        .recipe-card.fade-in {
            animation: fadeIn 0.5s ease forwards;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* 内容标签页样式 */
        .content-tab {
            display: none;
        }
        
        .content-tab.active {
            display: block;
        }
        
        /* 空状态样式 */
        .empty-state {
            text-align: center;
            padding: 2rem 0;
        }
        
        .empty-state i {
            font-size: 3rem;
            color: #FF9AA2;
            margin-bottom: 1rem;
        }
        
        .empty-state p {
            color: #666;
            margin-bottom: 1rem;
        }
        
        /* 标签页切换 */
        .tab-button {
            position: relative;
            flex: 1;
            text-align: center;
            padding: 1rem;
            transition: all 0.3s ease;
        }
        
        .tab-button::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 1px;
            height: 100%;
            background: linear-gradient(to bottom right, transparent 49%, #e5e7eb 50%, transparent 51%);
            transform: skewX(-15deg);
        }
        
        .tab-button:last-child::after {
            display: none;
        }
        
        .tab-button.active {
            color: #FF9AA2;
            font-weight: 500;
        }
    </style>
</head>
<body class="bg-gradient-to-b from-pink-50 to-white">
    <!-- 顶部导航栏 -->
    <nav class="fixed top-0 left-0 right-0 bg-white/80 backdrop-blur-md shadow-sm z-50">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <h1 class="text-xl font-bold text-gray-800">发现</h1>
            <div class="flex items-center space-x-4">
                <a href="profile.html" class="text-gray-600 hover:text-gray-900">
                    <i class="fas fa-user"></i>
                </a>
            </div>
        </div>
    </nav>

    <!-- 内容区域 -->
    <div class="container mx-auto px-4 pt-12 pb-24">
        <!-- 标签页切换 -->
        <div class="flex border-b border-gray-200 mb-2 items-center justify-center">
            <div class="flex space-x-6 whitespace-nowrap items-center">
                <button class="tab-button active px-4 py-2 text-gray-800 text-base" data-tab="discover">发现</button>
                <button class="tab-button px-4 py-2 text-gray-600 text-base" data-tab="favorites">我的收藏</button>
            </div>
        </div>
        
        <!-- 发现标签页 -->
        <div id="discover-tab" class="content-tab active">
            <!-- 搜索栏 -->
            <div class="glass-effect rounded-xl p-2 mb-3 flex items-center">
                <i class="fas fa-search text-gray-400 mr-2 text-sm"></i>
                <input type="text" placeholder="搜索菜谱、食材..." class="flex-1 bg-transparent outline-none text-gray-600 placeholder-gray-400 text-sm">
            </div>

            <!-- 分类导航 -->
            <div class="mb-4">
                <div class="flex items-center justify-between mb-2">
                    <h2 class="text-lg font-bold text-gray-800">分类</h2>
                    <a href="#" class="text-primary text-sm">查看全部</a>
                </div>
                <div class="flex space-x-2 overflow-x-auto pb-2">
                    <div class="category-icon flex-shrink-0 w-16 h-16 rounded-xl bg-primary/10 flex flex-col items-center justify-center" data-category="all">
                        <i class="fas fa-th-large text-primary text-xl mb-1"></i>
                        <span class="text-xs text-gray-600">全部</span>
                    </div>
                    <div class="category-icon flex-shrink-0 w-16 h-16 rounded-xl bg-primary/10 flex flex-col items-center justify-center" data-category="home">
                        <i class="fas fa-utensils text-primary text-xl mb-1"></i>
                        <span class="text-xs text-gray-600">家常菜</span>
                    </div>
                    <div class="category-icon flex-shrink-0 w-16 h-16 rounded-xl bg-secondary/10 flex flex-col items-center justify-center" data-category="dessert">
                        <i class="fas fa-cookie text-secondary text-xl mb-1"></i>
                        <span class="text-xs text-gray-600">甜点</span>
                    </div>
                    <div class="category-icon flex-shrink-0 w-16 h-16 rounded-xl bg-accent/10 flex flex-col items-center justify-center" data-category="meat">
                        <i class="fas fa-drumstick-bite text-accent text-xl mb-1"></i>
                        <span class="text-xs text-gray-600">肉类</span>
                    </div>
                    <div class="category-icon flex-shrink-0 w-16 h-16 rounded-xl bg-light/10 flex flex-col items-center justify-center" data-category="vegetarian">
                        <i class="fas fa-leaf text-light text-xl mb-1"></i>
                        <span class="text-xs text-gray-600">素食</span>
                    </div>
                    <div class="category-icon flex-shrink-0 w-16 h-16 rounded-xl bg-dark/10 flex flex-col items-center justify-center" data-category="seafood">
                        <i class="fas fa-fish text-dark text-xl mb-1"></i>
                        <span class="text-xs text-gray-600">海鲜</span>
                    </div>
                </div>
            </div>

            <!-- 热门标签 -->
            <div class="mb-4">
                <div class="flex items-center justify-between mb-2">
                    <h2 class="text-lg font-bold text-gray-800">热门标签</h2>
                    <a href="#" class="text-primary text-sm">更多</a>
                </div>
                <div class="flex flex-wrap gap-2">
                    <span class="tag px-3 py-1 bg-primary/10 text-primary rounded-full text-sm" data-tag="quick">快手菜</span>
                    <span class="tag px-3 py-1 bg-secondary/10 text-secondary rounded-full text-sm" data-tag="diet">减脂</span>
                    <span class="tag px-3 py-1 bg-accent/10 text-accent rounded-full text-sm" data-tag="breakfast">早餐</span>
                    <span class="tag px-3 py-1 bg-light/10 text-light rounded-full text-sm" data-tag="lunch">午餐</span>
                    <span class="tag px-3 py-1 bg-dark/10 text-dark rounded-full text-sm" data-tag="dinner">晚餐</span>
                </div>
            </div>

            <!-- 热门菜谱 -->
            <div class="mb-6">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-xl font-bold text-gray-800">热门菜谱</h2>
                    <a href="#" class="text-primary text-sm">查看全部</a>
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div class="glass-effect rounded-xl overflow-hidden recipe-card" data-category="home" data-tags="quick,dinner">
                        <div class="relative">
                            <a href="cook.html" class="block">
                                <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="意面" class="w-full h-32 object-cover">
                                <div class="p-3">
                                    <div class="flex justify-between items-center">
                                        <h3 class="font-medium text-gray-800">意式肉酱面</h3>
                                        <div class="flex items-center text-xs text-gray-500">
                                            <i class="fas fa-fire mr-1"></i>
                                            <span>中等</span>
                                        </div>
                                    </div>
                                    <p class="text-xs text-gray-500 mt-1">经典意式风味，浓郁可口</p>
                                    <div class="flex items-center justify-between text-xs text-gray-500 mt-2">
                                        <div class="flex items-center">
                                            <i class="far fa-clock mr-1"></i>
                                            <span>30分钟</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <div class="absolute bottom-3 right-3 flex items-center space-x-2">
                                <div class="flex items-center">
                                    <i class="far fa-comment text-gray-500 mr-1"></i>
                                    <span class="text-xs text-gray-500">12</span>
                                </div>
                                <button class="text-primary like-button" onclick="toggleLike(this, event)">
                                    <i class="far fa-heart"></i>
                                </button>
                                <span class="text-xs text-gray-500 like-count">0</span>
                            </div>
                        </div>
                    </div>
                    <div class="glass-effect rounded-xl overflow-hidden recipe-card" data-category="meat" data-tags="lunch,dinner">
                        <div class="relative">
                            <a href="cook.html" class="block">
                                <img src="https://images.unsplash.com/photo-1568901346375-23c9450c58cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="汉堡" class="w-full h-32 object-cover">
                                <div class="p-3">
                                    <div class="flex justify-between items-center">
                                        <h3 class="font-medium text-gray-800">美式牛肉汉堡</h3>
                                        <div class="flex items-center text-xs text-gray-500">
                                            <i class="fas fa-fire mr-1"></i>
                                            <span>简单</span>
                                        </div>
                                    </div>
                                    <p class="text-xs text-gray-500 mt-1">多汁美味，层次丰富</p>
                                    <div class="flex items-center justify-between text-xs text-gray-500 mt-2">
                                        <div class="flex items-center">
                                            <i class="far fa-clock mr-1"></i>
                                            <span>45分钟</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <div class="absolute bottom-3 right-3 flex items-center space-x-2">
                                <div class="flex items-center">
                                    <i class="far fa-comment text-gray-500 mr-1"></i>
                                    <span class="text-xs text-gray-500">8</span>
                                </div>
                                <button class="text-primary like-button" onclick="toggleLike(this, event)">
                                    <i class="far fa-heart"></i>
                                </button>
                                <span class="text-xs text-gray-500 like-count">0</span>
                            </div>
                        </div>
                    </div>
                    <div class="glass-effect rounded-xl overflow-hidden recipe-card" data-category="vegetarian" data-tags="quick,lunch,diet">
                        <div class="relative">
                            <a href="cook.html" class="block">
                                <img src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="沙拉" class="w-full h-32 object-cover">
                                <div class="p-3">
                                    <div class="flex justify-between items-center">
                                        <h3 class="font-medium text-gray-800">彩虹沙拉</h3>
                                        <div class="flex items-center text-xs text-gray-500">
                                            <i class="fas fa-fire mr-1"></i>
                                            <span>简单</span>
                                        </div>
                                    </div>
                                    <p class="text-xs text-gray-500 mt-1">健康美味，色彩缤纷</p>
                                    <div class="flex items-center justify-between text-xs text-gray-500 mt-2">
                                        <div class="flex items-center">
                                            <i class="far fa-clock mr-1"></i>
                                            <span>15分钟</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <div class="absolute bottom-3 right-3 flex items-center space-x-2">
                                <div class="flex items-center">
                                    <i class="far fa-comment text-gray-500 mr-1"></i>
                                    <span class="text-xs text-gray-500">5</span>
                                </div>
                                <button class="text-primary like-button" onclick="toggleLike(this, event)">
                                    <i class="far fa-heart"></i>
                                </button>
                                <span class="text-xs text-gray-500 like-count">0</span>
                            </div>
                        </div>
                    </div>
                    <div class="glass-effect rounded-xl overflow-hidden recipe-card" data-category="seafood" data-tags="dinner">
                        <div class="relative">
                            <a href="cook.html" class="block">
                                <img src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="三文鱼" class="w-full h-32 object-cover">
                                <div class="p-3">
                                    <div class="flex justify-between items-center">
                                        <h3 class="font-medium text-gray-800">香煎三文鱼</h3>
                                        <div class="flex items-center text-xs text-gray-500">
                                            <i class="fas fa-fire mr-1"></i>
                                            <span>中等</span>
                                        </div>
                                    </div>
                                    <p class="text-xs text-gray-500 mt-1">外酥内嫩，营养丰富</p>
                                    <div class="flex items-center justify-between text-xs text-gray-500 mt-2">
                                        <div class="flex items-center">
                                            <i class="far fa-clock mr-1"></i>
                                            <span>20分钟</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <div class="absolute bottom-3 right-3 flex items-center space-x-2">
                                <div class="flex items-center">
                                    <i class="far fa-comment text-gray-500 mr-1"></i>
                                    <span class="text-xs text-gray-500">3</span>
                                </div>
                                <button class="text-primary like-button" onclick="toggleLike(this, event)">
                                    <i class="far fa-heart"></i>
                                </button>
                                <span class="text-xs text-gray-500 like-count">0</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 烹饪技巧 -->
            <div>
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-xl font-bold text-gray-800">烹饪技巧</h2>
                    <a href="#" class="text-primary text-sm">查看全部</a>
                </div>
                <div class="glass-effect rounded-xl p-4">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center mr-4">
                            <i class="fas fa-lightbulb text-white text-xl"></i>
                        </div>
                        <div>
                            <h3 class="font-bold text-gray-800">如何切洋葱不流泪</h3>
                            <p class="text-gray-600 text-sm">简单技巧让你切洋葱时不再流泪</p>
                        </div>
                    </div>
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 rounded-full bg-secondary flex items-center justify-center mr-4">
                            <i class="fas fa-fire text-white text-xl"></i>
                        </div>
                        <div>
                            <h3 class="font-bold text-gray-800">完美煎牛排的秘诀</h3>
                            <p class="text-gray-600 text-sm">掌握火候和时间，做出餐厅级牛排</p>
                        </div>
                    </div>
                    <div class="flex items-center">
                        <div class="w-12 h-12 rounded-full bg-accent flex items-center justify-center mr-4">
                            <i class="fas fa-balance-scale text-white text-xl"></i>
                        </div>
                        <div>
                            <h3 class="font-bold text-gray-800">食材替代指南</h3>
                            <p class="text-gray-600 text-sm">常见食材的替代方案，让烹饪更灵活</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 我的收藏标签页 -->
        <div id="favorites-tab" class="content-tab">
            <!-- 搜索栏 -->
            <div class="glass-effect rounded-xl p-3 mb-4 flex items-center">
                <i class="fas fa-search text-gray-400 mr-2"></i>
                <input type="text" id="favorites-search" placeholder="搜索收藏的菜谱..." class="flex-1 bg-transparent outline-none text-gray-600 placeholder-gray-400">
            </div>

            <!-- 收藏标签 -->
            <div class="mb-4">
                <div class="flex items-center justify-between mb-2">
                    <h2 class="text-lg font-bold text-gray-800">收藏标签</h2>
                </div>
                <div class="flex flex-wrap gap-2">
                    <span class="tag px-3 py-1 bg-primary/10 text-primary rounded-full text-sm active" data-favorite-tag="all">全部</span>
                    <span class="tag px-3 py-1 bg-secondary/10 text-secondary rounded-full text-sm" data-favorite-tag="recent">最近收藏</span>
                    <span class="tag px-3 py-1 bg-accent/10 text-accent rounded-full text-sm" data-favorite-tag="home">家常菜</span>
                    <span class="tag px-3 py-1 bg-light/10 text-light rounded-full text-sm" data-favorite-tag="dessert">甜点</span>
                    <span class="tag px-3 py-1 bg-dark/10 text-dark rounded-full text-sm" data-favorite-tag="meat">肉类</span>
                </div>
            </div>

            <!-- 收藏列表 -->
            <div id="favorites-list" class="grid grid-cols-2 gap-4">
                <!-- 收藏的菜谱将通过JavaScript动态加载 -->
            </div>

            <!-- 空状态 -->
            <div id="empty-favorites" class="empty-state hidden">
                <i class="fas fa-heart"></i>
                <p>还没有收藏的菜谱</p>
                <p class="text-sm">快去发现更多美味吧！</p>
            </div>
        </div>
    </div>

    <!-- 添加菜谱按钮 - 固定在右下角 -->
    <div class="fixed bottom-20 right-4 z-40">
        <button class="w-14 h-14 rounded-full bg-primary/90 text-white shadow-lg flex items-center justify-center hover:bg-primary transition-all duration-300" onclick="window.location.href='add-recipe.html'">
            <i class="fas fa-plus text-xl"></i>
        </button>
    </div>

    <!-- 底部导航栏 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white/80 backdrop-blur-md py-2 px-4 flex justify-around items-center shadow-sm">
        <a href="index.html" class="nav-tab flex flex-col items-center text-gray-600">
            <i class="fas fa-home text-xl"></i>
            <span class="text-xs mt-1">首页</span>
        </a>
        <a href="discover.html" class="nav-tab active flex flex-col items-center">
            <i class="fas fa-crosshairs text-xl"></i>
            <span class="text-xs mt-1">打猎</span>
        </a>
        <a href="menu.html" class="nav-tab flex flex-col items-center text-gray-600">
            <i class="fas fa-list text-xl"></i>
            <span class="text-xs mt-1">菜单</span>
        </a>
        <a href="profile.html" class="nav-tab flex flex-col items-center text-gray-600">
            <i class="fas fa-user text-xl"></i>
            <span class="text-xs mt-1">我的</span>
        </a>
    </div>

    <script>
        // 点赞功能
        function toggleLike(button, event) {
            // 阻止事件冒泡，防止触发菜谱卡片的点击事件
            event.stopPropagation();
            
            const icon = button.querySelector('i');
            const likeCount = button.nextElementSibling;
            const currentCount = parseInt(likeCount.textContent);
            
            // 添加点赞动画
            button.classList.add('like-animation');
            setTimeout(() => {
                button.classList.remove('like-animation');
            }, 500);
            
            if (icon.classList.contains('far')) {
                // 未点赞状态，切换为已点赞
                icon.classList.remove('far');
                icon.classList.add('fas', 'text-primary');
                button.classList.add('liked');
                likeCount.textContent = currentCount + 1;
                
                // 创建点赞特效
                createLikeEffect(event.clientX, event.clientY);
                
                // 保存点赞状态到本地存储
                const recipeId = button.closest('.glass-effect').querySelector('a').getAttribute('href').split('.')[0];
                saveLikeStatus(recipeId, true);
                
                // 更新成就系统
                updateAchievements('like', 1);
            } else {
                // 已点赞状态，切换为未点赞
                icon.classList.remove('fas', 'text-primary');
                icon.classList.add('far');
                button.classList.remove('liked');
                likeCount.textContent = currentCount - 1;
                
                // 保存点赞状态到本地存储
                const recipeId = button.closest('.glass-effect').querySelector('a').getAttribute('href').split('.')[0];
                saveLikeStatus(recipeId, false);
            }
        }
        
        // 创建点赞特效
        function createLikeEffect(x, y) {
            const heart = document.createElement('div');
            heart.innerHTML = '<i class="fas fa-heart text-primary"></i>';
            heart.style.position = 'fixed';
            heart.style.left = x + 'px';
            heart.style.top = y + 'px';
            heart.style.fontSize = '20px';
            heart.style.opacity = '0';
            heart.style.transition = 'all 0.5s ease';
            heart.style.zIndex = '1000';
            document.body.appendChild(heart);
            
            // 动画效果
            setTimeout(() => {
                heart.style.opacity = '1';
                heart.style.transform = 'translateY(-50px) scale(1.5)';
            }, 10);
            
            // 移除元素
            setTimeout(() => {
                heart.style.opacity = '0';
                heart.style.transform = 'translateY(-100px) scale(0.5)';
                setTimeout(() => {
                    document.body.removeChild(heart);
                }, 500);
            }, 1000);
        }
        
        // 保存点赞状态到本地存储
        function saveLikeStatus(recipeId, isLiked) {
            let likedRecipes = JSON.parse(localStorage.getItem('likedRecipes') || '{}');
            likedRecipes[recipeId] = isLiked;
            localStorage.setItem('likedRecipes', JSON.stringify(likedRecipes));
        }
        
        // 添加到收藏
        function addToFavorites(recipeId) {
            let favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
            
            // 检查是否已经收藏
            if (!favorites.includes(recipeId)) {
                favorites.push(recipeId);
                localStorage.setItem('favorites', JSON.stringify(favorites));
                
                // 更新成就系统
                updateAchievements('collect', 1);
                
                // 如果当前在收藏标签页，刷新收藏列表
                if (document.getElementById('favorites-tab').classList.contains('active')) {
                    loadFavorites();
                }
            }
        }
        
        // 从收藏中移除
        function removeFromFavorites(recipeId) {
            let favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
            
            // 检查是否已经收藏
            const index = favorites.indexOf(recipeId);
            if (index !== -1) {
                favorites.splice(index, 1);
                localStorage.setItem('favorites', JSON.stringify(favorites));
                
                // 如果当前在收藏标签页，刷新收藏列表
                if (document.getElementById('favorites-tab').classList.contains('active')) {
                    loadFavorites();
                }
            }
        }
        
        // 加载收藏的菜谱
        function loadFavorites() {
            const favoritesList = document.getElementById('favorites-list');
            const emptyFavorites = document.getElementById('empty-favorites');
            
            // 获取收藏的菜谱ID
            const favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
            
            // 获取所有菜谱
            const recipes = JSON.parse(localStorage.getItem('recipes') || '[]');
            
            // 清空收藏列表
            favoritesList.innerHTML = '';
            
            // 如果没有收藏的菜谱，显示空状态
            if (favorites.length === 0) {
                favoritesList.classList.add('hidden');
                emptyFavorites.classList.remove('hidden');
                return;
            }
            
            // 显示收藏列表
            favoritesList.classList.remove('hidden');
            emptyFavorites.classList.add('hidden');
            
            // 获取选中的标签
            const selectedTag = document.querySelector('.tag[data-favorite-tag].active').getAttribute('data-favorite-tag');
            
            // 筛选收藏的菜谱
            let filteredRecipes = [];
            
            if (selectedTag === 'all') {
                // 显示所有收藏的菜谱
                filteredRecipes = recipes.filter(recipe => favorites.includes(recipe.id));
            } else if (selectedTag === 'recent') {
                // 显示最近收藏的菜谱（最近5个）
                filteredRecipes = recipes
                    .filter(recipe => favorites.includes(recipe.id))
                    .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
                    .slice(0, 5);
            } else {
                // 按分类筛选
                filteredRecipes = recipes.filter(recipe => 
                    favorites.includes(recipe.id) && recipe.category === selectedTag
                );
            }
            
            // 渲染收藏的菜谱
            filteredRecipes.forEach(recipe => {
                const recipeCard = document.createElement('div');
                recipeCard.className = 'glass-effect rounded-xl overflow-hidden recipe-card';
                recipeCard.innerHTML = `
                    <div class="relative">
                        <a href="cook.html" class="block">
                            <img src="${recipe.imageUrl || 'https://images.unsplash.com/photo-1504674900247-0877df9cc836?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'}" alt="${recipe.name}" class="w-full h-32 object-cover">
                            <div class="p-3">
                                <div class="flex justify-between items-center">
                                    <h3 class="font-medium text-gray-800">${recipe.name}</h3>
                                    <div class="flex items-center text-xs text-gray-500">
                                        <i class="fas fa-fire mr-1"></i>
                                        <span>${recipe.difficulty === 'easy' ? '简单' : recipe.difficulty === 'medium' ? '中等' : '困难'}</span>
                                    </div>
                                </div>
                                <p class="text-xs text-gray-500 mt-1">${recipe.tips || '美味可口'}</p>
                                <div class="flex items-center justify-between text-xs text-gray-500 mt-2">
                                    <div class="flex items-center">
                                        <i class="far fa-clock mr-1"></i>
                                        <span>${recipe.cookingTime}分钟</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                        <div class="absolute bottom-3 right-3 flex items-center space-x-2">
                            <div class="flex items-center">
                                <i class="far fa-comment text-gray-500 mr-1"></i>
                                <span class="text-xs text-gray-500">${recipe.comments || 0}</span>
                            </div>
                            <button class="text-primary like-button liked" onclick="toggleLike(this, event)">
                                <i class="fas fa-heart"></i>
                            </button>
                            <span class="text-xs text-gray-500 like-count">${recipe.likes || 0}</span>
                        </div>
                    </div>
                `;
                favoritesList.appendChild(recipeCard);
            });
        }
        
        // 切换标签页
        function switchTab(tabName) {
            // 移除所有标签页的激活状态
            document.querySelectorAll('.content-tab').forEach(tab => {
                tab.classList.remove('active');
            });
            
            // 移除所有标签按钮的激活状态
            document.querySelectorAll('.tab-button').forEach(button => {
                button.classList.remove('active');
                button.classList.add('text-gray-600');
                button.classList.remove('text-gray-800', 'font-medium');
            });
            
            // 添加当前标签页的激活状态
            document.getElementById(`${tabName}-tab`).classList.add('active');
            
            // 添加当前标签按钮的激活状态
            document.querySelector(`.tab-button[data-tab="${tabName}"]`).classList.add('active', 'text-gray-800', 'font-medium');
            document.querySelector(`.tab-button[data-tab="${tabName}"]`).classList.remove('text-gray-600');
            
            // 如果切换到收藏标签页，加载收藏的菜谱
            if (tabName === 'favorites') {
                loadFavorites();
            }
        }
        
        // 页面加载时恢复点赞状态
        document.addEventListener('DOMContentLoaded', function() {
            const likedRecipes = JSON.parse(localStorage.getItem('likedRecipes') || '{}');
            
            document.querySelectorAll('.glass-effect').forEach(recipeCard => {
                const linkElement = recipeCard.querySelector('a');
                if (!linkElement) return; // 跳过没有链接的卡片
                
                const recipeId = linkElement.getAttribute('href').split('.')[0];
                const likeButton = recipeCard.querySelector('.like-button');
                const likeCount = recipeCard.querySelector('.like-count');
                
                if (!likeButton || !likeCount) return; // 跳过没有点赞按钮或计数的卡片
                
                if (likedRecipes[recipeId]) {
                    const icon = likeButton.querySelector('i');
                    if (icon) {
                        icon.classList.remove('far');
                        icon.classList.add('fas', 'text-primary');
                        likeButton.classList.add('liked');
                    }
                }
            });
            
            // 初始化分类和标签筛选
            initCategoryAndTagFilter();
            
            // 初始化收藏标签筛选
            initFavoritesTagFilter();
            
            // 添加标签页切换事件
            document.querySelectorAll('.tab-button').forEach(button => {
                button.addEventListener('click', function() {
                    const tabName = this.getAttribute('data-tab');
                    switchTab(tabName);
                });
            });
            
            // 添加收藏搜索事件
            document.getElementById('favorites-search').addEventListener('input', function() {
                // 实现搜索功能
                const searchTerm = this.value.toLowerCase();
                const recipeCards = document.querySelectorAll('#favorites-list .recipe-card');
                
                recipeCards.forEach(card => {
                    const recipeName = card.querySelector('h3').textContent.toLowerCase();
                    if (recipeName.includes(searchTerm)) {
                        card.classList.remove('hidden');
                    } else {
                        card.classList.add('hidden');
                    }
                });
            });
            
            // 添加菜谱按钮点击事件
            const addRecipeButton = document.querySelector('.fixed.bottom-20.right-4 button');
            if (addRecipeButton) {
                addRecipeButton.addEventListener('click', function() {
                    // 跳转到添加菜谱页面
                    window.location.href = 'add-recipe.html';
                });
            }
        });
        
        // 初始化分类和标签筛选
        function initCategoryAndTagFilter() {
            // 分类点击事件
            document.querySelectorAll('.category-icon').forEach(category => {
                category.addEventListener('click', function() {
                    // 移除所有分类的激活状态
                    document.querySelectorAll('.category-icon').forEach(c => {
                        c.classList.remove('active');
                    });
                    
                    // 添加当前分类的激活状态
                    this.classList.add('active');
                    
                    // 获取选中的分类
                    const selectedCategory = this.getAttribute('data-category');
                    
                    // 筛选菜谱
                    filterRecipes();
                });
            });
            
            // 标签点击事件
            document.querySelectorAll('.tag').forEach(tag => {
                tag.addEventListener('click', function() {
                    // 切换标签的激活状态
                    this.classList.toggle('active');
                    
                    // 筛选菜谱
                    filterRecipes();
                });
            });
            
            // 默认选中"全部"分类
            document.querySelector('.category-icon[data-category="all"]').classList.add('active');
        }
        
        // 初始化收藏标签筛选
        function initFavoritesTagFilter() {
            // 收藏标签点击事件
            document.querySelectorAll('.tag[data-favorite-tag]').forEach(tag => {
                tag.addEventListener('click', function() {
                    // 移除所有标签的激活状态
                    document.querySelectorAll('.tag[data-favorite-tag]').forEach(t => {
                        t.classList.remove('active');
                    });
                    
                    // 添加当前标签的激活状态
                    this.classList.add('active');
                    
                    // 加载收藏的菜谱
                    loadFavorites();
                });
            });
        }
        
        // 筛选菜谱
        function filterRecipes() {
            // 获取选中的分类
            const selectedCategory = document.querySelector('.category-icon.active').getAttribute('data-category');
            
            // 获取选中的标签
            const selectedTags = Array.from(document.querySelectorAll('.tag.active')).map(tag => tag.getAttribute('data-tag'));
            
            // 获取所有菜谱卡片
            const recipeCards = document.querySelectorAll('.recipe-card');
            
            // 筛选菜谱
            recipeCards.forEach(card => {
                const cardCategory = card.getAttribute('data-category');
                const cardTags = card.getAttribute('data-tags').split(',');
                
                // 检查分类是否匹配
                const categoryMatch = selectedCategory === 'all' || cardCategory === selectedCategory;
                
                // 检查标签是否匹配
                const tagMatch = selectedTags.length === 0 || selectedTags.some(tag => cardTags.includes(tag));
                
                // 显示或隐藏菜谱卡片
                if (categoryMatch && tagMatch) {
                    card.classList.remove('hidden');
                    setTimeout(() => {
                        card.classList.add('fade-in');
                    }, 10);
                } else {
                    card.classList.remove('fade-in');
                    card.classList.add('hidden');
                }
            });
        }
        
        // 更新成就系统
        function updateAchievements(type, value) {
            // 获取当前成就数据
            let achievements = JSON.parse(localStorage.getItem('achievements') || '{}');
            
            // 初始化成就数据
            if (!achievements[type]) {
                achievements[type] = 0;
            }
            
            // 更新成就数据
            achievements[type] += value;
            
            // 保存成就数据
            localStorage.setItem('achievements', JSON.stringify(achievements));
            
            // 检查是否解锁新成就
            checkAchievements();
        }
        
        // 检查是否解锁新成就
        function checkAchievements() {
            // 获取当前成就数据
            const achievements = JSON.parse(localStorage.getItem('achievements') || '{}');
            
            // 成就规则
            const achievementRules = {
                like: [
                    { level: 1, threshold: 5, title: '点赞新手', description: '点赞5个菜谱' },
                    { level: 2, threshold: 20, title: '点赞达人', description: '点赞20个菜谱' },
                    { level: 3, threshold: 50, title: '点赞大师', description: '点赞50个菜谱' }
                ],
                cook: [
                    { level: 1, threshold: 3, title: '烹饪新手', description: '完成3道菜' },
                    { level: 2, threshold: 10, title: '烹饪达人', description: '完成10道菜' },
                    { level: 3, threshold: 30, title: '烹饪大师', description: '完成30道菜' }
                ]
            };
            
            // 检查每种类型的成就
            for (const type in achievementRules) {
                if (achievements[type]) {
                    const currentValue = achievements[type];
                    const rules = achievementRules[type];
                    
                    // 检查每个等级的成就
                    rules.forEach(rule => {
                        const achievementKey = `${type}_${rule.level}`;
                        const unlocked = localStorage.getItem(`achievement_${achievementKey}`);
                        
                        // 如果成就未解锁且达到阈值，则解锁成就
                        if (!unlocked && currentValue >= rule.threshold) {
                            localStorage.setItem(`achievement_${achievementKey}`, 'true');
                            
                            // 显示成就解锁通知
                            showAchievementNotification(rule.title, rule.description);
                        }
                    });
                }
            }
        }
        
        // 显示成就解锁通知
        function showAchievementNotification(title, description) {
            // 创建通知元素
            const notification = document.createElement('div');
            notification.className = 'fixed top-4 right-4 bg-white rounded-lg shadow-lg p-4 z-50 max-w-xs animate-fade-in';
            notification.innerHTML = `
                <div class="flex items-center">
                    <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3">
                        <i class="fas fa-trophy text-white"></i>
                    </div>
                    <div>
                        <h3 class="font-bold text-gray-800">${title}</h3>
                        <p class="text-gray-600 text-sm">${description}</p>
                    </div>
                </div>
            `;
            
            // 添加到页面
            document.body.appendChild(notification);
            
            // 3秒后移除通知
            setTimeout(() => {
                notification.classList.add('animate-fade-out');
                setTimeout(() => {
                    document.body.removeChild(notification);
                }, 500);
            }, 3000);
        }
    </script>
</body>
</html> 